<template>
    <div id="Application">
        <!-- 游戏区域 -->
        <div class="container">
            <!-- 底部挡板 -->
            <div class="board" :style="{ left: boardX + 'px' }"></div>
            <!-- 弹球 -->
            <div class="ball" :style="{ left: ballX + 'px', top: ballY + 'px' }"></div>
            <!-- 游戏结束提示 -->
            <h1 v-if="fail" style="text-align: center;">游戏失败</h1>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 控制挡板位置
            boardX: 0,
            // 控制弹球位置
            ballX: 0,
            ballY: 0,
            // 控制弹球移动速度
            rateX: 0.1,
            rateY: 0.1,
            // 控制结束游戏提示的展示
            fail: false
        }
    },
    mounted() {
        // 添加键盘事件
        this.enterKeyup();
        // 随机弹球的运动速度和方向
        this.rateX = (Math.random() * 0.5 + 0.1);
        this.rateY = (Math.random() * 0.5 + 0.1);
        // 开启计数器，控制弹球移动
        this.timer = setInterval(() => {
            // 到达右侧边缘进行反弹
            if (this.ballX + this.rateX >= 440 - 30) {
                this.rateX *= -1;
            }
            // 到达左侧边缘进行反弹
            if (this.ballX + this.rateX <= 0) {
                this.rateX *= -1;
            }
            // 到达上侧边缘进行反弹
            if (this.ballY + this.rateY <= 0) {
                this.rateY *= -1;
            }
            this.ballX += this.rateX;
            this.ballY += this.rateY;
            // 失败判定
            if (this.ballY >= 440 - 30 - 10) {
                // 挡板接住了弹球，进行反弹
                if (this.boardX <= this.ballX + 30 && this.boardX + 80 >= this.ballX) {
                    this.rateY *= -1;
                } else {
                    // 没有接住弹球，游戏结束
                    clearInterval(this.timer);
                    this.fail = true;
                }
            }
        }, 2);
    },
    methods: {
        // 控制挡板移动
        keydown(event) {
            if (event.key === "ArrowLeft") {
                if (this.boardX > 10) {
                    this.boardX -= 20;
                }
            } else if (event.key === "ArrowRight") {
                if (this.boardX < 440 - 80) {
                    this.boardX += 20;
                }
            }
        },
        enterKeyup() {
            document.addEventListener("keydown", this.keydown);
        }
    }
}
</script>

<style scoped>
body {
    margin: 0;
    padding: 0;
}
.container {
    position: relative;
    margin: 0 auto;
    width: 440px;
    height: 440px;
    background-color: blanchedalmond;
}
.ball {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 0px;
    top: 0px;
    background-color: orange;
    border-radius: 30px;
}
.board {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 10px;
    width: 80px;
    border-radius: 5px;
    background-color: red;
}
</style>
